<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="年度">
                <el-date-picker v-model="queryParams.startTime" value-format="yyyy" type="year" placeholder="开始年度"
                    @change="handleStartYearChange"></el-date-picker>
                <span style="margin: 0 10px">至</span>
                <el-date-picker v-model="queryParams.endTime" value-format="yyyy" type="year" placeholder="结束年度"
                    :min-date="queryParams.startTime" @change="handleEndYearChange"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-s-data" @click="count">统计</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" ref="refbut">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-download" @click="exportExcel">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-printer" @click="print">打印</el-button>
            </el-col>
        </el-row>

        <div style="width: 70%; margin: 0 auto;">
            <table class="custom-table">
                <tr class="title">
                    <th :colspan="(typeYear.length * 2) + 2" style="border: 0 !important;">
                        <h1 style="font-size: 28px;" class="h1">
                            档案门类统年度计表
                        </h1>
                    </th>
                </tr>
                <tr class="dates">
                    <th :colspan="(typeYear.length * 2) + 2" style="border: 0 !important;">
                        <h3 style="font-size: 20px;" class="h3">
                            {{ dates }}
                        </h3>
                    </th>
                </tr>
                <tr>
                    <th :colspan="(typeYear.length * 2) + 2">
                        档案类型年度数量总表
                    </th>
                </tr>

                <tbody v-for="(itemList, indexList) in ndList" :key="indexList">
                    <tr>
                        <th :rowspan="itemList.categoryList.length + 2">{{ itemList.fondsName }}</th>
                        <th rowspan="2">门类</th>
                        <th colspan="2" v-for="(item, NDindex) in typeYear" :key="NDindex">{{ item }}</th>
                    </tr>
                    <tr>
                        <template v-for="itemYear in typeYear.length" v-key="itemYear">
                            <td>件总数</td>
                            <td>卷总数</td>
                        </template>
                    </tr>
                    <tr v-for="(itemCategory, idx) in itemList.categoryList" :key="idx">
                        <td>{{ itemCategory.categoryName }}</td>
                        <template v-for="(dnitem, NDindexDict) in typeYear" v-key="NDindexDict">
                            <template v-for="(itemtj, tjIndex) in itemCategory.tj" v-key="tjIndex">
                                <template v-if="dnitem == itemtj.ND">
                                    <td> {{ itemtj.FIELSUM }}</td>
                                    <td>{{ itemtj.FOLDERSUM }}</td>
                                </template>
                            </template>
                        </template>
                    </tr>

                </tbody>
            </table>
        </div>

        <!-- <div style="width: 70%; height: 300px; margin: 0 auto; margin-top: 3%">
        <div id="histogram" style="width: 90%; height:100%;"></div>
      </div> -->
    </div>
</template>
  
<script>
import { ndtj } from "@/api/archive/statistics/ndStatistics/index.js";
import * as XLSX from "xlsx";
import * as echarts from "echarts";

export default {
    name: "index",
    data() {
        return {
            queryParams: {
                startTime: undefined,
                endTime: undefined
            },
            date: "",
            dates: "",
            // 统计表格数据
            ndList: [],
            typeYear: [],//年度List
        }
    },
    created() {
        const now = new Date();
        const currentYear = now.getFullYear();
        // this.time = currentYear

        const currentMonth = String(now.getMonth() + 1).padStart(2, '0');
        const currentDate = String(now.getDate()).padStart(2, '0');
        this.date = currentYear + "年" + currentMonth + "月" + currentDate + "日"
        this.getList()
    },
    methods: {
        handleStartYearChange() {
            if (this.queryParams.endTime == null) {
                this.queryParams.endTime = undefined;
            }
            if (this.queryParams.endTime < this.queryParams.startTime) {
                this.queryParams.startTime = this.queryParams.endTime;
            }
        },
        handleEndYearChange() {
            if (this.queryParams.endTime < this.queryParams.startTime) {
                this.queryParams.endTime = this.queryParams.startTime;
            }
            if (!this.queryParams.startTime) {
                this.queryParams.startTime = this.queryParams.endTime;
            }
        },
        // 统计
        count() {
            this.getList()
        },
        getList() {
            this.dates = "制表日期：" + this.date
            ndtj(this.queryParams).then(response => {
                console.log(response)
                this.ndList = response.data.ndList
                this.typeYear = response.data.type
                console.log(this.typeYear)
                // this.getHistogram()  //统计方法
            })
        },

        // 导出
        exportExcel() {
            const worksheet = XLSX.utils.table_to_sheet(document.querySelector('.custom-table'));
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

            console.log(worksheet)
            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
            this.saveAsExcel(excelBuffer, `门类统计_${new Date().getTime()}`);
        },

        saveAsExcel(buffer, filename) {
            const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `${filename}.xlsx`;
            link.click();
        },

        // 打印
        print() {
            $("input").each(function () {
                $(this).attr('value', $(this).val());
            });

            const tableElement = document.querySelector('.custom-table');
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            const iframeDoc = iframe.contentWindow.document;

            iframeDoc.open();
            iframeDoc.write(`
            <html>
            <head>
  <!--            <title>打印表单</title>-->
              <style>
                @media print {
                  .h1 {
                    font-size: 28px;
                    text-align: center;
                  }
  
                  .h3 {
                    font-size: 20px;
                    text-align: right;
                  }
  
                  .table {
                    margin-top: 5px;
                    padding: 1%;
                  }
                  .custom-table {
                    width: 100%; /* 设置表格宽度为100% */
                    margin: 0 auto;
                    border-collapse: collapse; /* 合并单元格边框 */
                  }
  
                  .custom-table th,
                  .custom-table td {
                    padding: 8px; /* 设置单元格内边距 */
                    padding:5px 5px 5px 5px;
                    align-items:center;
                    justify-content:flex-start;
                    opacity:1;
                    color:#000000;
                    letter-spacing:2px;
                    font-family:仿宋;
                    font-size:16px;
                    border: 1px solid #000; /* 设置单元格边框样式 */
                    padding: 8px; /* 设置单元格内边距 */
                    text-align: center; /* 设置单元格文本居中 */
                  }
  
                  .title {
                    heigth: 5em;
                    line-height: 5em;
                    text-align: center;
                    padding:5px 5px 5px 5px;
                    align-items:center;
                    justify-content:center;
                    letter-spacing:4px;
                    font-weight:bold;
                    font-family:宋体;
                    font-size:24px;
                    opacity:1;
                    margin: 0 auto;
                    background:rgba(255, 255, 255, 0) !important;
                    border: 0 !important;
                    box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
                  }
  
                  .dates {
                    text-align: right;
                  }
                }
              </style>
            </head>
            <body>
               ${tableElement.outerHTML}
              <script>
                window.onload = function() {
                  window.print();
                  window.close();
                }
              <\/script>
            </body>
            </html>
        `);
            iframeDoc.close();
        },

        // 制作柱状图
        getHistogram() {
            var Num = ['product', '案卷级目录数', '卷内件目录数', '文件目录数', '电子文件']
            var filteredArr = this.tableData.filter(obj => obj.name != "小计");
            var data = filteredArr.map(item => {
                return {
                    product: item.name,
                    '案卷级目录数': item.juanNum,
                    '卷内件目录数': item.juanneijian,
                    '文件目录数': item.jianNum,
                    '电子文件': item.docNum
                }
            })
            this.$nextTick(() => {
                var myChart = echarts.init(document.getElementById('histogram'));

                // 指定图表的配置项和数据
                var option = {
                    legend: {},
                    tooltip: {
                    },
                    dataset: {
                        dimensions: Num,
                        source: data,
                    },
                    grid: {
                        containLabel: true,
                        top: 50,
                        x: 45,
                        x2: 30,
                        y2: 0
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLabel: {
                            interval: 0,//横轴信息全部显示
                            rotate: -15,//-15度角倾斜显示
                        },
                    },
                    yAxis: {},
                    series: [
                        { type: 'bar', barWidth: 20 },
                        { type: 'bar', barWidth: 20 },
                        { type: 'bar', barWidth: 20 },
                        { type: 'bar', barWidth: 20 }
                    ],
                    color: ['#80b3ff', '#ffb366', '#6666ff', '#ff6600', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                };
                // 使用配置绘制柱状图
                myChart.setOption(option);
            })
        }
    }
}
</script>
  
<style lang="scss" scoped>
.h1 {
    font-size: 28px;
    text-align: center;
}

.h3 {
    font-size: 20px;
    text-align: right;
}

.table {
    margin-top: 5px;
    padding: 1%;
}

.custom-table {
    width: 100%;
    /* 设置表格宽度为100% */
    margin: 0 auto;
    border-collapse: collapse;
    /* 合并单元格边框 */
}

.custom-table th,
.custom-table td {
    padding: 8px;
    /* 设置单元格内边距 */
    padding: 5px 5px 5px 5px;
    align-items: center;
    justify-content: flex-start;
    opacity: 1;
    color: #000000;
    letter-spacing: 2px;
    font-family: 仿宋;
    font-size: 16px;
    border: 1px solid #000;
    /* 设置单元格边框样式 */
    padding: 8px;
    /* 设置单元格内边距 */
    text-align: center;
    /* 设置单元格文本居中 */
}

.title {
    heigth: 5em;
    line-height: 5em;
    text-align: center;
    padding: 5px 5px 5px 5px;
    align-items: center;
    justify-content: center;
    letter-spacing: 4px;
    font-weight: bold;
    font-family: 宋体;
    font-size: 24px;
    opacity: 1;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0) !important;
    border: 0 !important;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) !important;
}

.dates {
    text-align: right;
}
</style>
  